<template>
    <div class="login">
        <div class=imgPart>
            <img src="../../static/login.png" style="max-width:100%"/>
        </div>
        <div class="inputPart">
            <a-card title="登  录" class="card" hoverable:true
                :headStyle="{fontSize: '23px',fontFamily: 'SourceHanSansSC-bold'}">
                <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
                    <a-form-item>
                        <a-input v-decorator="['userName',{ rules: [{ required: true, message: 'Please input your username!' }] },]"
                            placeholder="Username">
                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input v-decorator="['password',{ rules: [{ required: true, message: 'Please input your Password!' }] },]" type="password"
                            placeholder="Password">
                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-checkbox v-decorator="['remember',{valuePropName: 'checked',initialValue: true,},]" style="left:-15%;">
                            Remember me
                        </a-checkbox>
                        <a class="login-form-forgot" href="">
                            Forgot password
                        </a>
                        <a-button type="primary" html-type="submit" class="login-form-button">
                            Log in
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-card>
        </div>
        <nuxt-link to="/mainPage/main">
        <a-button-group :size="size" style="float:left;left:-1%">
            <a-button type="primary">
            <a-icon type="left" />返回
            </a-button>
        </a-button-group>
        </nuxt-link>
    </div>
</template>

<script>
import {mapActions} from "vuex"
export default {
    layout: "indexLayout",
    beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods: {
    ...mapActions({
        signIn: 'account/signIn'
    }),
    openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),

      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log('Received values of form: ', values);
          let self = this
          this.signIn(values).then((res)=>{
              self.$router.push('/mainPage/main')
              this.openNotification("OK","登录成功","欢迎您，尊敬的管理员!")
          },(error)=>{
              this.openNotification("NOK","登录失败","请输入正确的管理员账号和密码!")
          })
        }
      });
    },
  },
  data(){
      return{
          size:'large'
      }
  }
};
</script>

<style lang="scss" scoped>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
.input{
    width: 78%;
    margin-left:8%;
    margin-bottom: 3%;
    margin-top:3%;
    text-align:center;
}
.card{
    width: 100%;
    height:320px;
    text-align:center;
}
.login{
    width:100%;
    height: 100%;
    display: block;
    .inputPart{
        width: 25%;
        height: 100%;
        margin-right: 4%;
        margin-top: 16%;
        float: right;
    }
    .imgPart{
        width:60%;
        height:100%;
        float: right;
        margin-top: 10.6%;
    }
}
</style>
...skipping...
              this.openNotification("OK","登录成功","欢迎您，尊敬的管理员!")
          },(error)=>{
              this.openNotification("NOK","登录失败","请输入正确的管理员账号和密码!")
          })
        }
      });
    },
  },
  data(){
      return{
          size:'large'
      }
  }
};
</script>

<style lang="scss" scoped>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
.input{
    width: 78%;
    margin-left:8%;
    margin-bottom: 3%;
    margin-top:3%;
    text-align:center;
}
.card{
    margin-top:3%;
    text-align:center;
}
.card{
    width: 100%;
    height:320px;
    text-align:center;
}
.login{
    width:100%;
    height: 100%;
    display: block;
    .inputPart{
        width: 25%;
        height: 100%;
        margin-right: 4%;
        margin-top: 16%;
        float: right;
    }
    .imgPart{
        width:60%;
        height:100%;
        float: right;
        margin-top: 10.6%;
    }
}
</style>
